<script setup lang="ts">
import { appStore } from '@/stores/app'
const app = appStore()

import { defineEmits, defineProps, ref } from 'vue'
import { hasPermission, confirm } from '@/utils'
import { i18n } from '@/i18n'

const emit = defineEmits(['edit', 'delete', 'toggle'])
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  permission: {
    type: String,
    required: false
  },
  title: {
    type: String,
    required: false
  },
  enableToggle: {
    type: Boolean,
    required: false
  },
  disableEdit: {
    type: Boolean,
    required: false
  },
  disableDelete: {
    type: Boolean,
    required: false
  }
})
const toggleShow = ref(false)

function canDelete() {
  return (
    !props.disableDelete &&
    (props.permission
      ? hasPermission(props.permission)
      : hasPermission(props.name.toLowerCase() + ':delete'))
  )
}
function canEdit() {
  return (
    !props.disableEdit &&
    (props.permission
      ? hasPermission(props.permission)
      : hasPermission(props.name.toLowerCase() + ':update'))
  )
}
function onClickDelete() {
  confirm(i18n.global.t('message.deletedata') + i18n.global.t('table.'+ props.name) +' [' + props.title + ']').then(() => {
    emit('delete')
  })
}
function onClickToggle() {
  emit('toggle')
  toggleShow.value = !toggleShow.value
}
</script>

<style></style>

<template>
  <el-tooltip v-if="canEdit()" :content="$t('button.editTip')" placement="top" :disabled="app.disableTip">
    <el-button type="primary" @click="$emit('edit')" icon="Edit" size="small" />
  </el-tooltip>
  <el-tooltip v-if="canDelete()" :content="$t('button.deleteTip')" placement="top" :disabled="app.disableTip">
    <el-button type="danger" @click="onClickDelete" icon="Delete" size="small" />
  </el-tooltip>
  <el-tooltip v-if="enableToggle && !toggleShow" :content="$t('button.expandTip')" placement="top" :disabled="app.disableTip">
    <el-button type="primary" @click="onClickToggle" icon="ArrowDown" size="small" />
  </el-tooltip>
  <el-tooltip v-if="enableToggle && toggleShow" :content="$t('button.collapseTip')" placement="top" :disabled="app.disableTip">
    <el-button type="primary" @click="onClickToggle" icon="ArrowUp" size="small" />
  </el-tooltip>
</template>
